<template>

  <div class="loginImg">
    <img src="@/images/loginImg.png" class="loginImg">
  </div>
  <van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="username"
      name="username"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="password"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block    color="linear-gradient(to right, 	#00FF00, #00CED1)" native-type="submit">
      登录
    </van-button>
  </div>
</van-form>
  <div class="explanation">
    <pre>
      页面说明:该页面有两个账号均可以生成token
      用户名:luo  密码:100  
      用户名:guo  密码:123  
   
    </pre>
  </div>

</template>

<script>
import { ref } from 'vue';
import {login} from '../api/user'
import { useRouter } from 'vue-router';
export default {
  setup() {
    const username = ref('');
    const password = ref('');
    const router = useRouter()
    const onSubmit = (values) => {
      // console.log('submit', values);
      login(values).then(res => {
        //  console.log(res);
        window.localStorage.setItem('jwtToken',res.token)
        router.push('/home')
      })
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
};

</script>

<style>
.loginImg {
  width: 100%;
  height: 450px;
  
}
.van-field {
        margin-top: 30px;
        font-size: 17px;
}
.van-button {
    height: 70px;
}
.explanation {
  position: fixed;
  top: 84%;
  font-size: 14px;
  background-color: #fff;
  z-index: 200;
}
</style>